<template>
  <div class="footer">
    <div class="footer_left">
      <div>
        <p>客服中心</p>
        <p><a href="#">Chat</a></p>
        <p><a href="#">联系方式</a></p>
      </div>
      <div>
        <p>帮助</p>
        <p><a href="#">换货和退货</a></p>
        <p><a href="#">配送</a></p>
        <p><a href="#">付款</a></p>
        <p><a href="#">票据</a></p>
        <p><a href="#">常见问题</a></p>
      </div>
      <div>
        <p>企业</p>
        <p><a href="#">关于我们</a></p>
        <p><a href="#">加入我们</a></p>
      </div>
    </div>
    <div class="footer_right">
      <div class="footer_right_top">
        <div>
          <div class="imgbox">
            <img
              src="https://static.pullandbear.cn/2/static2/itxwebstandard/images/home/qrappbanner/cn_zh.png?20211020015501"
              alt="">
          </div>
        </div>
        <div>
          <div class="text_details">
            <h3>探索我们的应用程序</h3>
            <pre style="color:#666">
随时随地进行购物！
下载Yiji应用程序，不要错过我们的系列新品。
提供IOS和Android版本
            </pre>
          </div>
        </div>
      </div>
      <div class="footer_right_bottom">
        <p>关于我们</p>
        <div class="logo">
          <div><a href="#"><img src="@/assets/weixin.png" alt=""></a></div>
          <div><a href="#"><img src="@/assets/weibo.png" alt=""></a></div>
          <div><a href="#"><img src="@/assets/facebook.png" alt=""></a></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'Footer'
}
</script>
<style scoped>
 * {
      margin: 0;
      padding: 0;
    }

    .footer {
      width: 100%;
      margin-top: 100px;
      display: flex;
      justify-content: space-around;
    }

    .footer_left {
      flex: 1;
      display: flex;
      justify-content: space-around;
    }

    .footer_left p:not(:first-child)::after {
      content: "";
      display: block;
      transition: all 300ms ease-in-out 0s;
      cursor: pointer;
      border-top: 1px solid #000;
      width: 0;
    }

    .footer_left p:hover:after {
      width: 65px;
      margin-left: 88px;
    }

    .footer_right {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .footer_left>div {
      flex: 1;
    }

    .footer_left>div>p {
      height: 50px;
      line-height: 50px;
      font-size: 15px;
      text-align: center;

    }

    .footer_left>div>p:nth-child(1) {
      color: black;
      margin-bottom: 5px;
    }

    a {
      text-decoration: none;
      color: #666;
    }

    .footer_right_top {
      display: flex;
      flex: 3;
    }

    .footer_right_top>div:nth-child(1) {
      flex: 1;
    }

    .imgbox>img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .footer_right_top>div:nth-child(2) {
      flex: 3;
    }

    .footer_right_bottom {
      flex: 2;
    }

    .imgbox {
      width: 60%;
      height: 60%;
      margin: 20% auto;
    }

    .text_details>p {
      font-size: 8px;
    }

    .text_details {
      margin-top: 50px;
    }

    h3 {
      margin-bottom: 10px;
    }

    .footer_right_bottom {
      border-top: 1px solid #000;
    }

    .logo {
      display: flex;
    }

    .logo>div {
      width: 50px;
      height: 50px;
      margin: 10px;
    }

    .logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .logo>div:nth-child(3) img {
      width: 90%;
      height: 90%;
    }
</style>